<!--条件单-->
<template>
    <div>
        <div class="stopdiv">
           <div class="stopdiv_top">
               <span class="stopdfont">条件预埋单设置</span>
               <div @click="Close">
               <img src="../../assets/guanbi.png" alt="">
               </div>
           </div>
           <div class="stopdiv_bott">
               <!-- <span class="information">信息</span><br> -->
               <div class="account">
                   <span class="account_font account_padd">账户：{{username}}</span>
                   <span class="account_font account_padd">合约：{{namesp}}</span>
                   <span class="account_font">方向：</span>
                       <select class="bott_oneinp" v-model="priceval1">
                           <option :value="item.id" v-for="item in pricelist1">{{item.name}}</option>
                      </select>
                      &nbsp; &nbsp; &nbsp;
                   <span class="account_font">开仓：</span>
                   <select class="bott_oneinp" v-model="priceval2">
                           <option :value="item.id" v-for="item in pricelist2">{{item.name}}</option>
                      </select>
                 </div>
                <div class="account">
                     <span>价格：</span>
                          <select class="bott_oneinp2" v-model="priceval3">
                           <option :value="item.id" v-for="item in pricelist3">{{item.name}}</option>
                      </select>
                    <span> &nbsp; &nbsp;超 &nbsp;</span>
                        <input class="inpdiv" type="number" v-model="hands1" min="1">
                        <span>个点位</span>
                      &nbsp; &nbsp; &nbsp;
                   <span>数量：</span>
                   <input class="inpdiv" type="number" v-model="hands2" min="1">
               </div>
                 <div class="divbott">
                     <div class="divbott_top">条件</div>


                     <div class="divbott_in">
                        <input class="inprad" checked  @click="getRadioVala" type="radio" name="type" value="1">   <!--1-->
                        <div :class="radioVal=='1' ? '' : 'class-b'">
                          <select class="bott_oneinp2" v-model="price">
                            <option :value="item.id" v-for="item in pricelist4">{{item.name}}</option>
                          </select>
                        <span class="inpradfont">连续</span>
                         <input type="number" class="inp_font" v-model="penji" min="1">
                           <span class="inpradfont">笔</span>
                             <select class="bott_oneinp2" v-model="hand">
                                <option :value="item.name" v-for="item in pricelist5">{{item.name}}</option>
                             </select>
                             <input class="inp_bi" type="number" v-model="type_price" min="1"> 
                             </div>
                        </div>


                         <div class="divbott_in">
                       <input class="inprad" @click="getRadioVala" type="radio" name="type" value="2">       <!--2-->
                       <div :class="radioVal=='2' ? '' : 'class-b'">
                        <span class="inpradfont">时间到达</span>
                           <input class="inp_data" v-model="time" type="date" name="user_date" />
                       </div>
                        </div>


                         <div class="divbott_in inu_mar">
                        <input class="inprad" @click="getRadioVala" type="radio" name="type" value="3">       <!--3-->
                        <span class="inpradfont">预埋，手动发出</span>
                        </div>
                    
                         <!-- <div class="divbott_in inu_mar2">
                         <input class="inp_che" @click="checli" type="checkbox" name="type" value="1">
                         <span class="inpradfont">如果</span>
                          <input :class="chebox? '':'class-b'" type="number" class="inp_font" min="1">
                          <span class="inpradfont">秒内未成交则撤单</span>
                          <div :class="chebox? 'inp_chdiv':'inp_chdivss'">
                            <input :class="chebox? '':'class-b'" class="inp_che" @click="" type="checkbox" name="type" value="1">
                              <span class="inpradfont">并重新下单</span>
                          </div>
                        </div> -->
                 </div>
                 <div class="bots">
                    <div class="bots_left"></div>
                    <div class="bots_rig">
                       <button class="bots_buo" @click="Close">取消</button>
                       <button class="bots_buo" @click="Submission">确定</button>
                    </div>
                 </div>
           </div>
        </div>
    </div>
</template>

<script>
    import qs from "qs"
export default {
  data() {
    return {
      param: {},
      oneitem: {},
      namesp: "",
      pricelist1: [
        {
          name: "买入",
          id: "1"
        },
        {
          name: "卖出",
          id: "2"
        }
      ],
      priceval1: "",
      pricelist2: [
        {
          name: "开仓",
          id: "1"
        },
        {
          name: "平仓",
          id: "2"
        }
      ],
      priceval2: "",
      pricelist3: [
        {
          name: "现价",
          id: "1"
        },
        {
          name: "最新价",
          id: "2"
        },
        {
          name: "挂单价",
          id: "3"
        },
        {
          name: "快速价",
          id: "4"
        },
        {
          name: "对手价",
          id: "5"
        }
      ],
      priceval3: "",
      pricelist4: [
        {
          name: "最新价",
          id: "1"
        },
        {
          name: "买一价",
          id: "2"
        },
        {
          name: "卖一价",
          id: "3"
        }
      ],
      pricelist5: [
        {
          name: ">="
        },
        {
          name: "="
        },
        {
          name: "<="
        }
      ],
      time: "",
      checkedNames: "",
      hands1: "",
      hands2: "",
      radioVal: "1",
      penji: "1",
      price: "",
      type_price: "",
      chebox: false,
      username:''
    };
  },
  mounted() {
    this.oneitem = this.$store.state.one_show_product;
  },
  computed: {
    getItem() {
      return this.$store.state.one_show_product;
    }
  },
  watch: {
    getItem(val) {
      this.oneitem = this.$store.state.one_show_product;
    },
    oneitem(val) {
      var that = this;
      that.namesp = val.name; //名称
      that.id = val.id; //id
    }
  },
  created: function() {
    var that = this;
    that.priceval1 = that.pricelist1[0].id;
    that.priceval2 = that.pricelist2[0].id;
    that.priceval3 = that.pricelist3[4].id;
    that.price = that.pricelist4[0].id;
    that.hand = that.pricelist5[0].name;
    that.getuser()
  },
  methods: {
    //关闭模块
    Close() {
      this.$emit("headstop", "val");
    },
    getRadioVala(event) {
      //开仓事件
      this.radioVal = event.target.value;
    },
    checli() {
      this.chebox = !this.chebox;
      // console.log(this.chebox);
    },
    Submission() {
      var that = this;
      // console.log(that.priceval1); //方向
      // console.log(that.priceval2); //开仓
      // console.log(that.priceval3); //价格
      // console.log(that.hands1); //点位
      // console.log(that.hands2); //数量
      // console.log(that.radioVal + "oo"); //单选按钮

      that.name = {
        price: that.price,
        hand: that.penji,
        type: that.hand,
        type_price: that.type_price
      };
      // console.log(that.name); //笔

      // console.log(that.time + "---"); //时间
      if (typeof that.hands1 == "undefined" || !that.hands1) {
        return that.$message.error("请选择点位！");
      }
      if (typeof that.hands2 == "undefined" || !that.hands2) {
        return that.$message.error("请选择数量！");
      }
      if (that.radioVal == "1") {
        if (typeof that.penji == "undefined" || !that.penji) {
          return that.$message.error("请选择笔数！");
        }
        if (typeof that.type_price == "undefined" || !that.type_price) {
          return that.$message.error("请选择价格！");
        }
      }
      if (that.radioVal == "2") {
        if (typeof that.time == "undefined" || !that.time) {
          return that.$message.error("请选择时间！");
        }
      }
      that
        .$http({
          //调用接口
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          url:
            that.$serverUrl +
            "/futures_orders_map",
            data:qs.stringify({
                product_id:that.id,
                direction:that.priceval1,
                ware:that.priceval2,
                price:that.priceval3,
                point:that.hands1,
                hand:that.hands2 ,
                map_type:that.radioVal,
                map1:that.name,
                map2:that.time,
            })
        })
        .then(
          res => {
            if (res.data.msg == "success") {
               that.$message.success(res.data.data);
            } else {
               that.$message.error(res.data.msg);
            }
            that.Close()
          },
          function(error) {}
        );
    },
     getuser() {
      var that = this;
      that
        .$http({
          //调用接口
          method: "GET",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          url: that.$serverUrl + "futures_users_info"
        })
        .then(
          res => {
             that.username=res.data.data.nickname
          },
          function(error) {}
        );
    },
  }
};
</script>
<style scoped>
/* body {
  font-size: 0.8rem;
  color: #000000;
} */
.stopdiv {
  width: 555px;
  height: 440px;
  background-color: #b9d1ea;
}
.stopdiv_top {
  width: 555px;
  height: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.stopdfont {
  font-size: 12px;
  color: #000000;
}
.stopdiv_bott {
  width: 550px;
  height: 410px;
  margin-left: 3px;
  background-color: #f0f0f0;
  padding-top: 15px;
  box-sizing: border-box;
}
.information {
  margin-left: 30px;
  margin-top: 10px;
    font-size: 0.8rem;
  color: #000000;
}
.account {
  width: 550px;
  height: 20px;
  /* background-color: #B9D1EA; */
  display: flex;
  justify-content: flex-start;
  padding-left: 45px;
  box-sizing: border-box;
  margin-top: 15px;
    font-size: 0.8rem;
  color: #000000;
}
.account_font {
  font-weight: 600;
    font-size: 0.8rem;
  color: #000000;
}
.account_padd {
  margin-right: 45px;
}
.bott_oneinp {
  width: 50px;
  height: 20px;
}
.bott_oneinp2 {
  width: 70px;
  height: 20px;
}
.inpdiv {
  width: 60px;
  height: 15px;
  margin-left: 15px;
  margin-right: 5px;
}
.divbott {
  width: 500px;
  height: 210px;
  /* background-color: #B9D1EA; */
  margin-left: 25px;
  margin-top: 25px;
}
.divbott_top {
  margin-left: 5px;
    font-size: 0.8rem;
  color: #000000;
}
.divbott_in {
  width: 500px;
  height: 25px;
  /* background-color: aliceblue; */
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
    font-size: 0.8rem;
  color: #000000;
}
.inprad {
  margin-left: 20px;
  margin-right: 20px;
}
.inpradfont {
  margin-left: 10px;
  margin-right: 10px;
}
.inp_font {
  width: 60px;
  height: 17px;
}
.inp_bi {
  width: 100px;
  height: 17px;
  margin-left: 25px;
}
.inp_data {
  width: 115px;
  height: 20px;
}
.inp_che {
  margin-left: 20px;
}
.inp_chdiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.inp_chdivss {
  color: #808080;
}
.bots {
  width: 550px;
  height: 70px;
  /* background-color: #B9D1EA; */
  display: flex;
  justify-content: flex-start;
}
.bots_left {
  width: 340px;
  height: 70px;
}
.bots_rig {
  width: 210px;
  height: 70px;
  display: flex;
  justify-content: flex-start;
}
.bots_buo {
  width: 80px;
  height: 25px;
  margin-right: 13px;
  margin-top: 25px;
}
.class-b {
  pointer-events: none;
}
</style>


